<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue指令</title>
</head>
<body>
<div class="div02">
    <!--
    在视图中绑定vue实例内的数据的方式：
    1. 插值表达式  {{message}} 就能将vue实例中的message变量数据渲染到该处
    2. v-text指令 通过该指令在标签内部设置属性，那么就会将对应属性的值渲染到
    标签内部的text文本部分，就相当于我们之前通过document获取元素对象后
    使用的innerText属性
    3. v-html指令 通过该指令在标签内部设置属性，那么就会将对应属性的值渲染到文本部分，
    同时在渲染之前会解析HTML样式等内容，相当于innerHTML
    4. v-model指令 双向数据绑定，即将数据与视图进行绑定，当数据和视图任意一方发生变化时，
    对应一方也会发生变化，注意由于双向数据绑定，所以该指令只能用在input、textarea等能够
    修改视图数据的标签中

    在视图中绑定事件的指令，使用 v-on，如果不使用v-on绑定事件，那么就无法调用Vue实例中
    定义的数据以及方法，同时也无法使用Vue的语法特性，通常写作 v-on:click，也可以写作 @click
    在视图中遍历Vue实例内定义的数据，那么使用v-for指令，在遍历时可以获取每一次从数组/集合中
    存储的元素对象以及对应的下标，那么可以在预设的模板中使用该对象及下标，同时使用v-for遍历，
    每一次遍历都会自动创建你设定的模板标签节点，无需我们手动操作dom创建页面元素节点
    -->
    <!--在{{}}内部时一个表达式，会先对表达式进行运算，然后在进行渲染-->
    {{1 + 1}}
    <span>{{message}}</span><br/>
    <span v-text="message2"></span><br/>
    <!--v-text不会解析html内容，而v-html会解析样式等内容，从而进行渲染-->
    <span v-html="message2"></span>
</div>
</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        // 元素挂载，使用的是选择器
        el: '.div02',
        data: {
            message: 'hello',
            message2: '<span style="color: #4a948c">你好</span>'
        }
    });
</script>
</html>